<template>
  <div class="">
    <el-card>
      <title-line title="基本信息" />
      <div class="base-info flex">
        <!-- 用户头像信息 start -->
        <div class="infoBox flex">
          <img
            class="base-info-img"
            :src="etpInfo.profilePhoto || avatar_logo"
            style="width: 80px; height: 80px"
          />
          <div class="ml-5">
            <el-tag type="primary">已入驻</el-tag>
            <h4 class="mt-10">{{ etpInfo.nickName }}</h4>
            <p class="mt-10">
              <span>手机号：</span><span>{{ etpInfo.mobile }}</span>
            </p>
          </div>
        </div>
        <!-- 用户头像信息 end -->

        <el-row class="base-info-box ft-14 ml-20">
          <el-col
            v-for="(item, index) in baseInfo"
            :key="index"
            class="base-info-item mt-10"
            :span="8"
          >
            <span>{{ item.title }}</span>
            <span v-if="item.title">：</span>
            <span>{{ item.value ? item.value : '暂无' }}</span>

            <el-popover
              v-if="item.key === 'freezeTime' && item.value"
              placement="bottom"
              title="冻结理由"
              width="380"
              trigger="click"
            >
              <div class="mb-10">{{ etpInfo.etpVerify.reason }}</div>
              <div
                class="handel flex justify-between"
                style="padding-top: 10px; border-top: 1px solid #eee"
              >
                <p>冻结时间：{{ etpInfo.etpVerify.updatedTime }}</p>
                <p>操作人：{{ etpInfo.etpVerify.createdUser }}</p>
              </div>
              <span class="text-link-blue ml-5" slot="reference">查看理由</span>
            </el-popover>

            <span v-if="item.key === 'integralSum'" class="text-link-blue ml-5" @click="doTopUp"
              >充值</span
            >
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
/**
 * 企业信息基础信息展示子组件
 */
import { mapState, mapMutations, mapActions } from 'vuex'
import { JOIN_PlATFORM } from '@/enum/user'
export default {
  name: 'CompanyInfoBaseInfo',
  components: {},
  props: {},
  data() {
    return {
      // 企业信息
      etpInfo: {},
      // 用户基础信息
      baseInfo: [
        {
          key: 'joinTime',
          title: '入驻时间',
          value: ''
        },
        {
          key: 'joinPlatform',
          title: '入驻方式',
          value: ''
        },
        {
          key: 'freezeTime',
          title: '冻结时间',
          value: ''
        },
        {
          key: 'lastRechargeTime',
          title: '最近充值',
          value: ''
        },
        {
          key: 'integralSum',
          title: '企业主钱包',
          value: ''
        }
      ]
    }
  },
  computed: {
    // 默认头像
    avatar_logo() {
      return require('@/assets/avatar.jpg')
    },
    // 企业主资料刷新基础信息
    ...mapState('base', ['etpRefreshInfo'])
  },
  watch: {
    // 监听企业主资料刷新基础信息
    async etpRefreshInfo(newValue) {
      if (newValue) {
        this.setBaseInfo(newValue.info)
        this.SET_INFO_REFRESH(false)
      }
    }
  },
  created() {
    // 基础信息赋值
    this.setBaseInfo()
  },
  mounted() {},
  updated() {},
  methods: {
    // 企业主资料刷新基础信息写入
    ...mapMutations('base', ['SET_INFO_REFRESH']),
    // 获取企业主内容
    ...mapActions('base', ['getEtpInfo']),

    // 基础信息赋值
    async setBaseInfo() {
      try {
        // 获取企业信息
        const { data } = await this.getEtpInfo(this.$route.query.id)
        this.etpInfo = data
        this.baseInfo = this.baseInfo.map(el => {
          const obj = { ...el }
          if (el.key === 'joinPlatform') {
            obj.value = JOIN_PlATFORM[data[el.key]]
          } else if (el.key === 'freezeTime') {
            if (data.etpVerify) {
              obj.value = data.etpVerify.createdTime
            }
          } else {
            obj.value = data[el.key]
          }
          return obj
        })
      } catch (error) {
        console.log('setBaseInfo', error)
      }
    },

    // 点击充值
    doTopUp() {
      this.$emit('topUp')
    }
  }
}
</script>

<style lang="scss" scoped></style>
